<template>
  <view class="result-container">
    <!-- 支付结果图标 -->
    <view class="result-icon">
      <uni-icons 
        :type="status === 'success' ? 'checkmarkempty' : 'closeempty'"
        :color="status === 'success' ? '#52c41a' : '#ff4d4f'"
        size="64"
      ></uni-icons>
    </view>
    
    <!-- 支付结果标题 -->
    <view class="result-title">
      {{ status === 'success' ? '支付成功' : '支付失败' }}
    </view>
    
    <!-- 订单信息 -->
    <view class="order-info" v-if="orderNo">
      <text class="label">订单编号：</text>
      <text class="value">{{ orderNo }}</text>
    </view>
    
    <!-- 操作按钮 -->
    <view class="action-buttons">
      <button 
        class="primary-btn"
        @click="viewOrder"
      >
        查看订单
      </button>
      <button 
        class="secondary-btn"
        @click="backToHome"
      >
        返回首页
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      status: 'fail',  // 默认设置为失败状态
      orderNo: ''
    }
  },
  
  onLoad(options) {
    console.log('支付结果页面参数:', options)
    
    // 获取URL参数
    if (options.out_trade_no) {
      // 支付宝同步返回
      this.status = 'success'  // 支付宝同步返回时，说明支付成功
      this.orderNo = options.out_trade_no
    } else if (options.orderNo) {
      // 直接传入的订单号和状态
      this.orderNo = options.orderNo
      // 确保状态值为字符串类型
      if (typeof options.status === 'string') {
        this.status = options.status
      } else if (options.status === true) {
        this.status = 'success'
      } else if (options.status === false) {
        this.status = 'fail'
      } else {
        this.status = 'fail'
      }
    } else {
      // 其他情况
      this.status = 'fail'
      this.orderNo = ''
    }
    
    console.log('设置支付状态:', this.status, '订单号:', this.orderNo)
    
    // 根据支付结果显示提示
    uni.showToast({
      title: this.status === 'success' ? '支付成功' : '支付失败',
      icon: this.status === 'success' ? 'success' : 'error',
      duration: 2000
    })
  },
  
  methods: {
    // 查看订单详情
    viewOrder() {
      if (this.orderNo) {
        uni.navigateTo({
          url: `/pages/order/detail/index?orderNo=${this.orderNo}`
        })
      } else {
        uni.navigateTo({
          url: '/pages/order/list/index'
        })
      }
    },
    
    // 返回首页
    backToHome() {
      uni.switchTab({
        url: '/pages/index/index'
      })
    }
  }
}
</script>

<style lang="scss">
.result-container {
  min-height: 100vh;
  background-color: #fff;
  padding: 60rpx 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.result-icon {
  margin-bottom: 40rpx;
}

.result-title {
  font-size: 36rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 40rpx;
}

.order-info {
  background-color: #f8f8f8;
  padding: 30rpx;
  border-radius: 12rpx;
  width: 100%;
  margin-bottom: 60rpx;
  
  .label {
    font-size: 28rpx;
    color: #666;
  }
  
  .value {
    font-size: 28rpx;
    color: #333;
  }
}

.action-buttons {
  width: 100%;
  
  button {
    width: 100%;
    height: 88rpx;
    line-height: 88rpx;
    border-radius: 44rpx;
    font-size: 32rpx;
    margin-bottom: 30rpx;
    
    &.primary-btn {
      background-color: #ff5500;
      color: #fff;
    }
    
    &.secondary-btn {
      background-color: #f5f5f5;
      color: #666;
    }
  }
}
</style> 